Skip to content

B
bkunyun
Commit a23134c0 authored by jiangzijing's avatar jiangzijing
Browse files
Options

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

parent eea2f337
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 92 deletions
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ a23134c0
...@@ -28,86 +28,88 @@ const TemplateBox = (props: any) => { ...@@ -28,86 +28,88 @@ const TemplateBox = (props: any) => {
); );
return ( return (
<Box className={styles.templateBlock}> <Box className={styles.template}>
<Box> <Box className={styles.templateBlock}>
<Box <Box>
sx={{ <Box
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography
sx={{ sx={{
fontSize: "14px", display: "flex",
fontWeight: "600", justifyContent: "space-between",
color: "#1E2633", alignItems: "center",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}} }}
> >
{info.title} <Typography
</Typography> sx={{
{info.creator !== "root" && ( fontSize: "14px",
<Box 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={{ sx={{
backgroundColor: "rgba(227, 250, 236, 1)",
color: "rgba(2, 171, 131, 1)",
lineHeight: "20px",
padding: "1px 9px",
fontSize: "12px", fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
marginRight: "24px",
}} }}
> >
自定义 版本：{info.version}
</Box> </Typography>
)} <Typography
</Box> sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
<Box sx={{ display: "flex", marginBottom: "8px" }}> >
<Typography 更新时间：{info.updatedTime}
sx={{ </Typography>
fontSize: "12px", </Box>
fontWeight: "400", <Typography className={styles.templateDescText}>
color: "#1370FF", {info.description ? info.description : "此模板暂无描述。"}
marginRight: "24px",
}}
>
版本：{info.version}
</Typography>
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
>
更新时间：{info.updatedTime}
</Typography> </Typography>
</Box> </Box>
<Typography className={styles.templateDescText}> <Box
{info.description ? info.description : "此模板暂无描述。"} sx={{
</Typography> display: "flex",
</Box> justifyContent: "end",
<Box }}
sx={{ >
display: "flex", {isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
justifyContent: "end", <MyButton
}} size={"small"}
> text={"删除模版"}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && ( onClick={() => {
<MyButton props.startDialog(info.id);
size={"small"} }}
text={"删除模版"} style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
onClick={() => { />
props.startDialog(info.id); )}
}} {isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
style={{ backgroundColor: "#F0F2F5", color: "#565C66" }} <MyButton
/> size={"small"}
)} text={"使用模版"}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && ( onClick={() => addTemplateBlock(info.id)}
<MyButton style={{ marginLeft: "12px" }}
size={"small"} />
text={"使用模版"} )}
onClick={() => addTemplateBlock(info.id)} </Box>
style={{ marginLeft: "12px" }}
/>
)}
</Box> </Box>
</Box> </Box>
); );
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ a23134c0
...@@ -16,10 +16,15 @@ ...@@ -16,10 +16,15 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.template {
padding: 0 8px;
box-sizing: border-box;
}
.templateBlock { .templateBlock {
height: 194px; height: 194px;
background: #ffffff; 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-radius: 4px;
border: 1px solid #ebedf0; border: 1px solid #ebedf0;
padding: 16px 20px; padding: 16px 20px;
...@@ -32,32 +37,20 @@ ...@@ -32,32 +37,20 @@
} }
@media screen and (max-width:1220px) { @media screen and (max-width:1220px) {
.templateBlock { .template {
width: 49%; width: 50%;
margin-right: 2%;
}
.templateBlock:nth-child(2n){
margin-right: 0;
} }
} }
@media screen and (min-width:1220px) and (max-width:1600px) { @media screen and (min-width:1220px) and (max-width:1600px) {
.templateBlock { .template {
width: 32.423%; width: 33.33333%;
margin-right: 1.365%;
}
.templateBlock:nth-child(3n){
margin-right: 0;
} }
} }
@media screen and (min-width:1600px) { @media screen and (min-width:1600px) {
.templateBlock { .template {
width: 24%; width: 25%;
margin-right: 1.333%;
}
.templateBlock:nth-child(4n){
margin-right: 0;
} }
} }
...@@ -120,4 +113,4 @@ ...@@ -120,4 +113,4 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
} }
\ No newline at end of file
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ a23134c0
...@@ -145,7 +145,7 @@ const ProjectMembers = observer(() => { ...@@ -145,7 +145,7 @@ const ProjectMembers = observer(() => {
</Box> </Box>
)} )}
{templateList.length > 0 && ( {templateList.length > 0 && (
<Box sx={{ display: "flex", flexWrap: "wrap" }}> <Box sx={{ display: "flex", flexWrap: "wrap", margin:"0 -8px" }}>
{templateList && {templateList &&
templateList.length > 0 && templateList.length > 0 &&
templateList.map((item, key) => { templateList.map((item, key) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment