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

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

@@ -28,86 +28,88 @@ const TemplateBox = (props: any) => {
 	);
 
 	return (
-		<Box className={styles.templateBlock}>
-			<Box>
-				<Box
-					sx={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					}}
-				>
-					<Typography
+		<Box className={styles.template}>
+			<Box className={styles.templateBlock}>
+				<Box>
+					<Box
 						sx={{
-							fontSize: "14px",
-							fontWeight: "600",
-							color: "#1E2633",
-							marginBottom: "4px",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
 						}}
 					>
-						{info.title}
-					</Typography>
-					{info.creator !== "root" && (
-						<Box
+						<Typography
+							sx={{
+								fontSize: "14px",
+								fontWeight: "600",
+								color: "#1E2633",
+								marginBottom: "4px",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+							}}
+						>
+							{info.title}
+						</Typography>
+						{info.creator !== "root" && (
+							<Box
+								sx={{
+									backgroundColor: "rgba(227, 250, 236, 1)",
+									color: "rgba(2, 171, 131, 1)",
+									lineHeight: "20px",
+									padding: "1px 9px",
+									fontSize: "12px",
+								}}
+							>
+								自定义
+							</Box>
+						)}
+					</Box>
+					<Box sx={{ display: "flex", marginBottom: "8px" }}>
+						<Typography
 							sx={{
-								backgroundColor: "rgba(227, 250, 236, 1)",
-								color: "rgba(2, 171, 131, 1)",
-								lineHeight: "20px",
-								padding: "1px 9px",
 								fontSize: "12px",
+								fontWeight: "400",
+								color: "#1370FF",
+								marginRight: "24px",
 							}}
 						>
-							自定义
-						</Box>
-					)}
-				</Box>
-				<Box sx={{ display: "flex", marginBottom: "8px" }}>
-					<Typography
-						sx={{
-							fontSize: "12px",
-							fontWeight: "400",
-							color: "#1370FF",
-							marginRight: "24px",
-						}}
-					>
-						版本：{info.version}
-					</Typography>
-					<Typography
-						sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
-					>
-						更新时间：{info.updatedTime}
+							版本：{info.version}
+						</Typography>
+						<Typography
+							sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
+						>
+							更新时间：{info.updatedTime}
+						</Typography>
+					</Box>
+					<Typography className={styles.templateDescText}>
+						{info.description ? info.description : "此模板暂无描述。"}
 					</Typography>
 				</Box>
-				<Typography className={styles.templateDescText}>
-					{info.description ? info.description : "此模板暂无描述。"}
-				</Typography>
-			</Box>
-			<Box
-				sx={{
-					display: "flex",
-					justifyContent: "end",
-				}}
-			>
-				{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
-					<MyButton
-						size={"small"}
-						text={"删除模版"}
-						onClick={() => {
-							props.startDialog(info.id);
-						}}
-						style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
-					/>
-				)}
-				{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
-					<MyButton
-						size={"small"}
-						text={"使用模版"}
-						onClick={() => addTemplateBlock(info.id)}
-						style={{ marginLeft: "12px" }}
-					/>
-				)}
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "end",
+					}}
+				>
+					{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
+						<MyButton
+							size={"small"}
+							text={"删除模版"}
+							onClick={() => {
+								props.startDialog(info.id);
+							}}
+							style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
+						/>
+					)}
+					{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
+						<MyButton
+							size={"small"}
+							text={"使用模版"}
+							onClick={() => addTemplateBlock(info.id)}
+							style={{ marginLeft: "12px" }}
+						/>
+					)}
+				</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%;
 	}
 }
 
@@ -120,4 +113,4 @@
 	align-items: center;
 	flex-direction: column;
 	cursor: pointer;
-}
+}
\ No newline at end of file

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) => {