From 57674c568b8bc2578a45ee97a44825c3fc5abf52 Mon Sep 17 00:00:00 2001 From: ThyeeZz Date: Mon, 9 Sep 2024 11:18:37 +0800 Subject: [PATCH 1/4] update milvus blog layout --- src/components/card/BlogCard.jsx | 2 +- src/components/card/BlogCard.module.less | 34 ++----- src/components/customButton/index.tsx | 8 +- src/components/tags/index.jsx | 1 - src/pages/blog/index.jsx | 33 +++--- src/styles/blog.module.less | 124 +++++++++++------------ src/styles/mixin.module.less | 8 ++ 7 files changed, 99 insertions(+), 111 deletions(-) diff --git a/src/components/card/BlogCard.jsx b/src/components/card/BlogCard.jsx index a8f8b01e0..5b681eb97 100644 --- a/src/components/card/BlogCard.jsx +++ b/src/components/card/BlogCard.jsx @@ -14,7 +14,7 @@ const BlogCard = ({ title, desc, tags, cover, locale, path, className }) => { [className]: className, })} > -
+
{title}
diff --git a/src/components/card/BlogCard.module.less b/src/components/card/BlogCard.module.less index eb9347301..377eabe78 100644 --- a/src/components/card/BlogCard.module.less +++ b/src/components/card/BlogCard.module.less @@ -18,24 +18,15 @@ .descWrapper { .title { + .paragraph2(); + .overflowEllipsis3Row(); margin-top: 0; - font-weight: 700; - font-size: 18px; - line-height: 28px; color: #000; - margin-bottom: 14px; - } + height: 78px; - .desc { - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: #000; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + @media @tablet, @phone { + height: 72px; + } } .bottomWrapper { @@ -44,19 +35,14 @@ align-items: center; .tags { + .paragraph4(); display: flex; - margin: 18px 0 8px 0; + gap: 10px; list-style: none; padding: 0; text-transform: uppercase; - li { - color: @color-text-primary; - font-weight: bold; - font-size: 14px; - } - li + li { - margin-left: 10px; - } + color: @color-blue1; + margin-bottom: 4px; } } } diff --git a/src/components/customButton/index.tsx b/src/components/customButton/index.tsx index b584dcdf7..c88afbec8 100644 --- a/src/components/customButton/index.tsx +++ b/src/components/customButton/index.tsx @@ -28,6 +28,7 @@ function CustomLink(props: CustomButtonProps & { computedClasses: any }) { disabled = false, classes: customClasses = {}, computedClasses, + className = '', ...rest } = props; @@ -43,7 +44,7 @@ function CustomLink(props: CustomButtonProps & { computedClasses: any }) { target="_blank" rel="noopener noreferrer" href={href} - className={clsx(classes.linkButton, root, computedClasses)} + className={clsx(classes.linkButton, className, root, computedClasses)} > {children} {endIcon && ( @@ -55,7 +56,7 @@ function CustomLink(props: CustomButtonProps & { computedClasses: any }) { {...rest} href={href} target={target} - className={clsx(classes.linkButton, root, computedClasses)} + className={clsx(classes.linkButton, className, root, computedClasses)} > {children} {endIcon && ( @@ -78,6 +79,7 @@ const CustomButton = (props: CustomButtonProps) => { disabled = false, classes: customClasses = {}, size = 'medium', + className = '', ...rest } = props; @@ -102,7 +104,7 @@ const CustomButton = (props: CustomButtonProps) => { ) : (